﻿<!DOCTYPE html>
<html>
<head>
    <title>用户列表</title>$css()
</head>
<body>
    <div class="autoStyle">
        <table cellpadding="0" cellspacing="0" width="100%">
            <tr>
                <td width="300px">
                    <div class="control">
                        <!--
                    <div class="top">
                        <ul>
                            <li><a href="javascript:;" class="fn" fn="create">$icon(create)添加</a></li>
                            <li><a href="javascript:;" class="fn" fn="del">$icon(delete)删除</a></li>
                            <li><a href="javascript:;" class="fn" fn="loadData">$icon(refresh)刷新</a></li>
                        </ul>
                    </div>
                    -->
                        <div class="main autoHeight">
                            <table cellspacing="0" cellpadding="0" class="ui-table ui-table-list ui-table-low" id="categories">
                                <thead>
                                    <tr>
                                        <th class="hidden">
                                            ID
                                        </th>
                                        <th style="text-align: left; padding-left: 10px">
                                            编号
                                        </th>
                                        <th width="100" style="text-align: left;">
                                            用户名
                                        </th>
                                        <th width="100" style="text-align: left;">
                                            昵称
                                        </th>
                                    </tr>
                                </thead>
                                <tbody id="tbody">
                                </tbody>
                            </table>
                        </div>
                        <div class="ui-table-meta" id="pager">
                            共-个用户</div>
                    </div>
                </td>
                <td>
                    <div id="pl" class="relative autoHeight autoScroll">
                    </div>
                </td>
            </tr>
        </table>
    </div>
    <script type="text/template" id="list_menu_tpl">
        <div class="item" onclick="menu.add()">
            <a href="javascript:;">$icon(create)创建新用户</a>
        </div>
        <div class="item" onclick="menu.refresh()">
            <a href="javascript:;">$icon(refresh)刷新</a>
        </div>
    </script>

    <script type="text/template" id="tpl">
        <div class="item" onclick="menu.add()">
            <a href="javascript:;">$icon(create)创建新用户</a>
        </div>
        <div class="item" onclick="menu.setavailable('%id%')">
            <a href="javascript:;">$icon(edit)%state%</a>
        </div>
        <div class="item" onclick="menu.del('%id%')">
            <a href="javascript:;">$icon(delete)删除用户</a>
        </div>
        <div class="item" onclick="menu.refresh()">
            <a href="javascript:;">$icon(refresh)刷新</a>
        </div>
    </script>
    
    $js()
    <script type="text/javascript">

        //刷新页面
        Fn.refresh = function () { };

        //初始化表格及修改事件
        Fn.initTable = function () {
            //默认加载第一个分类
            if (cms.$('pl').innerHTML == '') {
                var id = document.getElementsByTagName('TABLE')[1].rows[1].getAttribute('indent');
                cms.load2('pl', 'user', 'updateuser', 'disabled=true&username=' + id);
            }

            cms.each(document.getElementsByTagName('TABLE')[1].getElementsByTagName('TD'), function (i, e) {
                cms.contextmenu.bind(e, '', function (menu) {
                    var id = e.parentNode.getAttribute('indent');
                    var state = e.parentNode.getAttribute('avaiable') == '1' ? '<span style="color:red">停用该用户</span>' : '启用该用户';
                    menu.innerHTML = cms.template(cms.$('tpl').innerHTML, { id: id, state: state });
                });
            });

            cms.initTable(document.getElementsByTagName('TABLE')[1], false, function () {
                cms.load2('pl', 'user', 'updateuser', 'username=' + Fn.ids[Fn.ids.length - 1]);
            });
        };

        //加载数据
        Fn.loadData = function () {
            cms.pagerLoad('tbody', 'pager', '1', 'user', 'UserJsonData', '', Fn.initTable);
        };

        //创建
        Fn.create = function () {
            cms.load2('pl', 'user', 'createuser', '');
        };


        Fn.loadData();

        //绑定列表菜单
        cms.contextmenu.bind(cms.$('tbody').parentNode.parentNode, cms.$('list_menu_tpl').innerHTML);

        var menu = {
            add: Fn.create,
            setavailable: function (id) {
                (function (_this) {
                    cms.xhr.jsonAjax('?', 'module=user&action=setuserstate&username=' + id,
                 function (json) {
                     if (json.result) {
                         parent.M.alert('操作成功！');
                         _this.refresh();
                     } else {
                         cms.dialog.alert(json.message);
                     }
                 });
                } (this));
            },
            //删除文档
            del: function (id) {
                if (confirm('确定删除吗?删除后将不可恢复!')) {
                    cms.xhr.jsonAjax('?', 'module=user&action=deleteuser&username=' + id,
                    function (json) { if (json.result) { Fn.loadData(); } else { cms.dialog.alert(json.message); } });
                }
            },
            refresh: Fn.loadData
        };

    </script>
    $iconcss()
</body>
</html>
